import React, {useRef, useState} from "react";
import {PageContainer} from "@ant-design/pro-layout";
import ProForm, {
  ProFormDateTimePicker,
  ProFormInstance,
  ProFormMoney,
  ProFormText,
} from "@ant-design/pro-form";
import {Button, message, Row} from "antd";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc"
dayjs.extend(utc)
import ProCard from "@ant-design/pro-card";
import LendLogs from "@/pages/LendLogs";
import {addLend} from "@/pages/Lend/service";

/**
 * 添加节点
 *
 * @param fields
 */

const handleAdd = async (fields: any) => {
  const hide = message.loading('正在处理...');

  try {
    const res = await addLend({...fields});
    if(res && res.status === "done"){
      hide();
      message.success(res.message);
      return true;
    }else {
      hide()
      message.error(res.message);
      return false;
    }
  } catch (error) {
    hide();
    message.error('记录失败请重试！');
    return false;
  }
};

const OwnForm: React.FC = ()=>{
  const formRef = useRef<ProFormInstance>();
  const [logUpdate, setLogUpdate] = useState<boolean>(false)

  return(
  <PageContainer pageHeaderRender={false} breadcrumbRender={false}>
    <ProCard
      style={{
        marginBlockStart: 8,
      }}
      gutter={2}
      ghost
    >
      <ProCard
        colSpan={{
          xs: '310px',
          sm: '310px',
          md: '310px',
          lg: '310px',
          xl: '310px',
        }}
        bordered
        style={{height: `calc(100vh - 100px)`}}
      >
        <ProForm
          formRef={formRef}
          onFinish={async (value) => {
            const success = await handleAdd(value);
            if (success) {
              formRef.current?.setFieldsValue({
                money: null,
                remark: null,
                toWho: null,
                time: dayjs(new Date()).utc().format()
              })

              // 更新标志，更新流水
              if (logUpdate) {
                setLogUpdate(false)
              }else {
                setLogUpdate(true)
              }
            }
          }}
          submitter={{
            render:false
          }}
        >
          <ProFormMoney
            name={"money"}
            label={"金额"}
            placeholder={"0.00"}
            rules={[{required:true, message:'金额必填！'}]}
          />
          <ProFormText
            name={"toWho"}
            label={"借给谁"}
            placeholder={""}
            rules={[{required:true, message:'必填！'}]}
          />
          <ProFormDateTimePicker
            name={"time"}
            label={"时间"}
            initialValue={`${dayjs(new Date()).utc().format()}`}
            fieldProps={{
              style: {"width": "100%"},
              onChange : (value) => {
                formRef.current?.setFieldsValue({
                  time: dayjs(value).utc().format()
                })
              }
            }}
          />
          <ProFormText
            name={"remark"}
            label={"备注"}
            placeholder={"请输入备注"}
          />
          <Row>
            <Button type={"primary"} onClick={()=>{formRef.current?.submit()}}>记一笔</Button>
          </Row>
        </ProForm>
      </ProCard>
      <ProCard bordered style={{height: `calc(100vh - 100px)`, backgroundColor: "white", overflowY: "hidden"}} ghost>
        <LendLogs update={logUpdate}/>
      </ProCard>
    </ProCard>
  </PageContainer>
  )
}

export default OwnForm;
